5.5 How to partially update - AJAX

• Can you explain how AJAX works?
• What technologies are used together with AJAX?

• How do you create an object in JavaScript?
• Which object is used for AJAX?
• How do you check if your browser supports AJAX?
• Trial 1: Let's check if your browser supports AJAX.
  <script> if (!???.???) alert('Your browser does not support AJAX.'); else alert('Your browser supports AJAX.'); </script> Submit

  
  
  
• Same-origin policy - What does "For security reasons, modern browsers do not allow access across domains." mean?

• Which method is used to open a channel to a server program?
• Which method is used to send a message to the server program?
• How to send GET data?
• How to send POST data?    xhttp.open("POST", url); xhttp.send("username=John&password=secretepassword");
• How to avoid using a cached data?    The post method
• When does 'readystatechange' event occur?
• How to know if there is a response message set from the server program?
• Trial 2: Let's to send a query information to TRUQA controller, using the GET method.
  <div id='tr2-result-pane'>Message here!</div> <script> var xhttp = ??? ???(); // create an AJAX object xhttp.??? = function() { // register an event handler for the onreadystatechange event if (this.??? == 4 && ???.??? == 200) { // check readyState and status alert(this.???); // text response $(???).???(???); // display the text response to the above <div> using jQuery } }; var controller = "//cs.tru.ca/~mlee/comp3540/Software/test_display_inputs.php"; var query="page=MainPage&command=PostQuestion&question=How big is the universe?"; xhttp.???(???, ???); // open the channel using the GET method xhttp.???(); // send the empty data for the query is attached at the end of URL </script> Submit

  
  
  
• Trial 3: Let's to send a query information to TRUQA controller, using the POST method.
  <div ???='tr3-result-pane'>Message here!</div> <script> var xhttp = ??? ???(); // create an AJAX object xhttp.??? = function() { // register an event handler for the onreadystatechange event if (????) { // check readyState and status alert(this.???); // text response ???(???).???(???); // display the text response to the above <div> using jQuery } }; var controller = "//cs.tru.ca/~mlee/comp3540/Software/test_display_inputs.php"; var query="page=MainPage&command=PostQuestion&question=How big is the universe?"; xhttp.???("???", ???); // open the channel to the controller using the post method //Send the proper header information along with the request xhttp.????("Content-type", "application/x-www-form-urlencoded"); // setRequestHeader() // send the query xhttp.???(???); </script> Submit

  
  
  
• For URL encoding, read HTML URL Encoding Reference.
• What if you try to retrieve data from another server?
  • Why is the same-origin policy important?

• When is this event triggered?
• What does the value 4 for readyState mean?
• What does the value 200 for status mean?
• What is a callback function?
• Read the last example carefully.
• List the two types of server response.
• How to use a text response?
• How to use an XML response?

• Read the first example carefully. 'Google Suggest' uses the same idea.
• Can you write your own 'TRU Suggest'? Do you think you will need to send only the new character or the whole string?
• Do you have to use only PHP for server-side programs?
• Do you have to use any special functions in PHP to respond to an AJAX request?
• $_REQUEST ???    = $_POST + $_GET + $_COOKIE
• strtolower(), strlen(), substr(), stristr(), strstr()

• Read the first example carefully.
• Trial 4: Let's to send the 'ListQuestions' command to TRUQA controller, using the POST method. After you complete the test, modify the code so that the GET method can be used.
  <button id='tr4-list-questions'>List Questions</button> <div ???='tr4-result-pane'>Message here!</div> <script> ????; // When the button is clicked, tr4_list_questions(). function tr4_list_questions() { var xhttp = ??? ???(); // create an AJAX object xhttp.??? = function() { // register an event handler for the onreadystatechange event if (this.??? == 4 && ???? == 200) { // check readyState and status ????(????); // display the text response to the above <div> using jQuery } }; var controller = "truqa_list_questions.php"; var query="page=MainPage&command=ListQuestions"; xhttp.???("???", controller); // open the channel to the controller using the post method //Send the proper header information along with the request xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // send the query ???? } </script> Submit

  
  
  
• Can you write the table in the client, not the server-side? Then how to send data to the client from the server?

• Events on an XMLHttpRequest object - ..., 'load' and 'error'
• Trial 4.5 The same as Trial 4, except events. Let's use the load event.
  <button id='tr4-5-list-questions'>List Questions</button> <div id='tr4-5-result-pane'>Message here!</div> <script> ????; // When the button is clicked, list_questions(). function tr4_5_list_questions() { var xhttp = ??? ???(); // create an AJAX object xhttp.addEventListener(???, function() { // register an event handler for the load event ????(????); // display the text response to the above <div> }); var controller = "truqa_list_questions.php"; xhttp.???("???", controller); // open the channel to the controller using the post method //Send the proper header information along with the request xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var query=????; // page=MainPage, and command=ListQuestions // send the query ???? } </script> Submit

  
  
  
• Can you write the table in the client, not the server-side? Then how to send data to the client from the server?

• The POST method is used if the second argument is provided as an object; otherwise, GET is assumed.
• Trial 5: Let's use .load() to display a table sent from TRUQA.
  <button id='tr5-list-questions'>List Questions</button> <div ???='tr5-result-pane'>Message here!</div> <script> ????; // When the button is clicked, list_questions(). function tr5_list_questions() { var controller = "truqa_list_questions.php"; var query="page=MainPage&command=ListQuestions"; $(???).???(????); // jQuery load() } </script> Submit

  
  
  

• Trial 6: Let's use .post() to display a table sent from TRUQA. After you complete the test, modify the code so that the GET method can be used.
  <button type='button' id='tr6-list-questions'>List Questions</button> <div id='tr6-result-pane'>Message here!</div> <script> function tr6_query() { var controller = "truqa_list_questions.php"; ????(???, // jQuery post() to the above controller { ???: 'MainPage', command: 'ListQuestions' ???, // page and command in an object ???(data) { // a callback function ????; // display it into '#tr6-result-pane' } ); } ???? // when the above button is clicked, call the above function </script> Submit

  
  
  

• $.ajax({url:..., type:..., data:..., success: function(data) { ... }})
• Trial 6.5: Let's use .ajax() to display a table sent from TRUQA.
  <button type='button' id='tr6-5-list-questions'>List Questions</button> <div id='tr6-5-result-pane'>Message here!</div> <script> function tr6_5_query() { var controller = "truqa_list_questions.php"; ????({ ???: controller, // jQuery ajax() to the above controller ???: { ???: 'MainPage', command: 'ListQuestions' ???, // page and command in an object ????, // the method type ???: ???(data) { // a callback function ????; // display it into '#tr6-5-result-pane' } }); } ???? // when the above button is clicked, call the above function </script> Submit

  
  
  

var command = {
    page: 'MainPage',
    command: 'SearchQuestions',
    term: search_terms
};
$('#button-search-questions').click(function() {
    var search_terms = ...;
    $('#result-pane').load('controller.php', command);  // when the second arg is object, POST is used. Otherwise, GET is used.
});

$('#button-search-questions').click(function() {
    var search_terms = ...;
    $.post('controller.php',
        {
            ????
        },
        function(result) {
            ????
        }
    );
});

$('#button-search-questions').click(function() {
    var search_terms = ...;
    $.ajax({
        url: 'controller.php',
        type: 'POST',
        data: {
            ????
        },
        success: function(result) {
            ????
        }
    });
});

• FormData can be sent with $.ajax(). For example, $.ajax({..., data: new FormData(formDomObject), processData: false, ...});.
• Trial 7: Let's try to send a form for the 'ListQuestions' command to TRUQA controller, using the jQuery ajax() method.
  <form id='tr7-list-questions'> <input type='text' name='page' value='MainPage'> <input type='text' name='command' value='ListQuestions'> <input type='submit' value='Submit'> </form> <div id='tr7-result-pane'>Message here!</div> <script> // When the above form is submitted, // get the response from the server, "truqa_list_questions.php", using the jQuiry ajax(), and // display it into the above div. // One thing to be careful. The button type of "Submit" is "submit". // You need to capture the "submit" event, and suppress the default action of submit button // so that the form is not submitted and your code submit the form using AJAX. // eventObj.preventDefault(); ???? </script> Submit